<template>
	<view @click="stopBut(vesselIndex)" class="homeItem home01" ref="home01">
		<view v-if="data.type == 'LOGO'" class="homeHear">
			<view class="hearLeft">
				<view class="leftbox01">
					<view class="box01Time01">{{ LocalTime.minute }}</view>
					<view class="box01Time02">
						<p>{{ LocalTime.week }} : {{ LocalTime.week | ff_week }}</p>
						<p>{{ LocalTime.days }}</p>
						<!--  -->
					</view>
				</view>
				<view class="leftbox02">
					<view class="box02Time01"></view>
					<view class="box02Time02"></view>
				</view>
			</view>
			<view class="hearRight"></view>
		</view>
<!-- willChange: 'transform', -->
		<!-- logo -->
		<view class="homeBody" v-if="data.type == 'LOGO'">
			<view :ref="data.id" :id="data.id" class="winBody LEFTBOX" ref="winBody"
				:style="{willChange: 'transform',zIndex: data.bjSrc.length + 1 ,transition: 'all '+logoTime+'s '+'linear 0s',transform: 'translateX('+logoWidth+'px)'}">
				<ul class="BodyUl" ref="BodyUl" :style="{ width:  itemWidth+'px' }" v-for="(item, index) in data.brands"
					:key="index">
					<li class="BodyLl" v-for="(newItem, newIndex) in item" :key="newIndex">
						<image class="imgWidth" :src="newItem.Src" />
					</li>
				</ul>
			</view>
			
			<image mode="aspectFill" class="bgimage" :src="bgimages"></image>
		</view>

		<!-- 大屏 -->
		<view class="FULL LEFTBOX" v-if="data.type == 'FULL'" ref="winBody">
			<!-- #ifdef APP-PLUS-->
			<video :show-loading="false" :http-cache="true" :controls="false" :poster="posterSrc"
				@timeupdate="upadtOpacity" @waiting="loadedmetadata" @ended="ended"
				:style="{width: '100%',height: '100%'}" :id="data.id" :vslide-gesture-in-fullscreen="false"
				:muted="true" :src="data.brands">
			</video>
			<!-- #endif-->
			<!-- #ifdef H5-->
			<video :show-loading="false" :http-cache="true" :controls="false" :poster="posterSrc"
				@loadedmetadata="loadedmetadata" @ended="ended" :style="{width: '100%',height: '100%'}" :id="data.id"
				:vslide-gesture-in-fullscreen="false" :muted="true" :src="data.brands"></video>
			<!-- #endif-->
			<!-- <image  mode="aspectFill"  class="bgimage" :src="bgimages"></image> -->
		</view>

		<!-- 左屏 -->
		<view class="leftFULL LEFTBOX" v-if="data.type == 'leftFULL'" ref="winBody">
			<view class="leftBox" :style="{ zIndex: data.bjSrc.length + 1 }">
				<!-- #ifdef APP-PLUS-->
				<video :show-loading="false" :http-cache="true" :controls="false" :poster="posterSrc"
					@waiting="loadedmetadata" @ended="ended" :id="data.id" object-fit="cover"
					:vslide-gesture-in-fullscreen="false" :muted="true" :src="data.brands"></video>
				<!-- #endif-->
				<!-- #ifdef H5-->
				<video :show-loading="false" :http-cache="true" :controls="false" :poster="posterSrc"
					loadedmetadata="loadedmetadata" @ended="ended" :id="data.id" object-fit="cover"
					:vslide-gesture-in-fullscreen="false" :muted="true" :src="data.brands"></video>
				<!-- #endif-->

			</view>
			<view class="rightBox" :style="{ zIndex: data.bjSrc.length + 1 }">
				<p>{{ data.text01 }}</p>
				<p>{{ data.text02 }}</p>
			</view>
			<image mode="aspectFill" class="bgimage" :src="bgimages"></image>
		</view>

		<!-- 中屏 -->
		<view class="mediateFULL LEFTBOX" v-if="data.type == 'mediateFULL'" ref="winBody">
			<view class="topBox" :style="{ zIndex: data.bjSrc.length + 1 }">
				<!-- #ifdef APP-PLUS-->
				<video :show-loading="false" :http-cache="true" :controls="false" :poster="posterSrc"
					@waiting="loadedmetadata" @ended="ended" :id="data.id" :vslide-gesture-in-fullscreen="false"
					:muted="true" :src="data.brands"></video>
				<!-- #endif-->
				<!-- #ifdef H5-->
				<video :show-loading="false" :http-cache="true" :controls="false" :poster="posterSrc"
					loadedmetadata="loadedmetadata" @ended="ended" :id="data.id" :vslide-gesture-in-fullscreen="false"
					:muted="true" :src="data.brands"></video>
				<!-- #endif-->

			</view>
			<view class="bottomBox" :style="{ zIndex: data.bjSrc.length + 1 }">
				<p>{{ data.text01 }}</p>
				<p>{{ data.text02 }}</p>
			</view>
			<image mode="aspectFill" class="bgimage" :src="bgimages"></image>
		</view>

		<view ref="homeEnd" class="homeEnd" v-if="data.type == 'LOGO'">
			<image class="endImg" mode="widthFix" src="../static/endLOGO.png" />
			<view class="endImg endProgress" v-if="!isdDownload">
				<view class="endProgress endProgress-red" :style="{width: progress+'%',}"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "home01",
		props: {
			data: {
				type: Object
			},
			vesselIndex: {
				type: Number
			},
			logoWidth: {
				type: Number
			},
			logoTime: {
				type: Number
			},
			long: {
				type: Number
			},
			vesselVideoImg: {
				type: Array
			},
			bgimages: {
				type: String
			},
			vesselCanvas: {
				type: Array
			},
			progress:{
				type: Number
			},
			isdDownload:{
				type: Boolean
			},
			// 
		},
		data() {
			return {
				setTime: null,
				that: null,
				itemWidth: 0,
				LocalTime: {
					minute: "00:00",
					week: "星期三",
					days: "2021-10-30",
				},
				// posterSrc: require('../static/videoImg.png')
				// posterSrc: "https://tx-glzsp.lclook.com/profile/upload/bg/1.png"\
				posterSrc: null,
				one: 0,
				upadtOpacityOne: 0,
				opacityIng: false,
				windowWidth: 0,
				windowHeight: 0,
				subNvue: null
				// posterSrc:  `${$config.url}/profile/uploads/static/videoImg.png`
			};
		},
		created() {
			console.log('this.data ====>', this.data.brands)
			this.posterSrc = `${this.$config.url}profile/upload/static/videoImg.png`
			console.log('this.posterSrc============>', this.posterSrc)
			// LOGO屏幕获取一屏五列 的 列宽度
			this.windowWidth = uni.getSystemInfoSync().windowWidth;
			this.windowHeight = uni.getSystemInfoSync().windowHeight;
			this.itemWidth = this.windowWidth / 5;

			this.getTime(8);

		},
		mounted() {
            console.log('logoWidth--------->',this.logoWidth)

		},

		methods: {
			upadtOpacity() {
				this.upadtOpacityOne++;
				if (this.upadtOpacityOne == 1) {
					console.log('视频播放时 把动画清空=======>', this.opacityIng)
				}

			},
			stopBut(index) {
				console.log("stopBut===========>", index)
			},

			loadedmetadata(event) {
				this.one++;
				if (this.one == 1) {
					if (this.data.type == "FULL") {
						this.opacityIng = true;
						console.log('视频加载瞬间 把动画添加上=======>', this.opacityIng)
					}


					let vesselIndex = this.vesselIndex;

					let vesselId = this.data.id;
					console.log('视频开始开始播放 视频时长====>', vesselIndex, vesselId);
					let newVesselVideoImg = JSON.parse(JSON.stringify(this.vesselVideoImg));
					console.log("视频加载完毕 播放前 一开始=================>", newVesselVideoImg[this.vesselIndex])
					newVesselVideoImg.forEach((item, index) => {
						item = true;
					});
					newVesselVideoImg[this.vesselIndex] = false;
					console.log("视频加载完毕 播放前=================>", newVesselVideoImg[this.vesselIndex], JSON.stringify(
						newVesselVideoImg))
					this.$emit('updataVesselVideoImg', JSON.stringify(newVesselVideoImg))
					this.$emit('updataPlayStyle', {
						vesselIndex,
						vesselId
					})
				}
			},
			ended() {
				// 判断是否为最后一个
				let vesselIndex = this.vesselIndex;
				let itemWidth = this.itemWidth;
				let screenType = this.data.type;
				let vesselId = this.data.id;
				let newVesselVideoImg = JSON.parse(JSON.stringify(this.vesselVideoImg));
				newVesselVideoImg.forEach((item, index) => {
					item = true;

				});
				newVesselVideoImg[this.vesselIndex] = true;
				// newVesselVideoImg[this.vesselIndex] = false;
				console.log("视频播放完毕时 播放后=================>", newVesselVideoImg[this.vesselIndex])
				this.$emit('updataVesselVideoImg', JSON.stringify(newVesselVideoImg))


				this.$emit('updataEndStyle', {
					vesselIndex,
					itemWidth,
					vesselId,
					screenType
				})

				setTimeout(() => {
					this.one = 0
				}, 100)

				console.log('播放结束========>', vesselId)
			},
			ff_canplay(e) {
				console.log("e===>", e);
			},
			dateFormat(fmt, date) {
				// debugger
				let ret;
				const opt = {
					"Y+": date.getFullYear().toString(), // 年
					"m+": (date.getMonth() + 1).toString(), // 月
					"d+": date.getDate().toString(), // 日
					"H+": date.getHours().toString(), // 时
					"M+": date.getMinutes().toString(), // 分
					"S+": date.getSeconds().toString(), // 秒
					// 有其他格式化字符需求可以继续添加，必须转化成字符串
				};
				for (let k in opt) {
					ret = new RegExp("(" + k + ")").exec(fmt);
					if (ret) {
						fmt = fmt.replace(
							ret[1],
							ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, "0")
						);
					}
				}
				return fmt;
			},
			getTime(timezone) {
				var date;
				var that = this;
				var a = ["日", "一", "二", "三", "四", "五", "六"];
				// var timezone = 8; // 时区 ： 东区时区1~12 西区时区-1~-12
				date = getLocalTime(timezone).toString().split("GMT+")[0].toString();
				// this.$("#showdate").html(date);

				function getLocalTime(i) {
					if (typeof i !== "number") {
						return new Date();
					}
					var d = new Date();
					var len = d.getTime();
					var offset = d.getTimezoneOffset() * 60000;
					var utcTime = len + offset;
					return new Date(utcTime + 3600000 * i);
				}

				// 调用时间
				var setdate = setInterval(() => {
					let days = getLocalTime(timezone);
					date = that.dateFormat("YYYY-mm-dd HH:MM", days);
					let week = days.getDay();
					let str = "星期" + a[week];

					let dateStr = date.split(" ");
					let LocalTime = {};
					if (timezone == 8) {
						//  debugger
						LocalTime.minute = dateStr[1];
						LocalTime.days = dateStr[0];
						LocalTime.week = str;

						that.$set(that, "LocalTime", LocalTime);
					} else if (timezone == -5) {
						LocalTime.minute = dateStr[1];
						LocalTime.days = dateStr[0];
						LocalTime.name = "纽约";
						LocalTime.yinName = "New York";
						Object.assign(that.Riots[0], LocalTime);
					} else if (timezone == 7) {
						LocalTime.minute = dateStr[1];
						LocalTime.days = dateStr[0];
						LocalTime.name = "新加坡";
						LocalTime.yinName = "Singapore";
						Object.assign(that.Riots[1], LocalTime);
					}
				}, 1000);
			},
		},
		watch: {
			duration(newVal, oldVal) {
				console.log('duration--Watch-->', newVal);
			},
			progress(newVal,oldVal){
							  console.log('下载进度====>',newVal)
							  
			},
			logoWidth(newVal,oldVal){
				console.log('logoWidthlogoWidth====>',newVal)
			},
			logoTime(newVal,oldVal){
				console.log('logoTimelogoTime====>',newVal)
			},
		},
		filters: {
			ff_week(val) {
				switch (val) {
					case "星期一":
						return "Mon";
						break;
					case "星期二":
						return "Tue";
						break;
					case "星期三":
						return "Wed";
						break;
					case "星期四":
						return "Thur";
						break;
					case "星期五":
						return "Fri";
						break;
					case "星期六":
						return "Sat";
						break;
					case "星期日":
						return "Sun";
						break;
				}
				// debugger
			},
		},

		computed: {

		}
	};
</script>

<style lang="scss" scoped>
	@import "../static/less/home01.scss";

	.canvasBg {
		width: 100%;
		height: 100vh;
		background-color: #fff;
		// opacity: 0;
		transition: all 6s;
		

	}


	// :style="{opacity: 1}"

	/deep/.uni-cover-image {
		img {
			width: 100%;
			height: 100vh;
		}
	}

	.controls-title {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;


		background-size: 100%;
	}

	/deep/.uni-list--lg {
		width: 100% !important;
		height: 100% !important;
	}

	.bgimage {
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;

		/deep/img {
			width: 100%;
			height: 100%;
			display: block;
		}
	}

	/deep/.uni-list {
		background-color: transparent;
	}

	/deep/uni-video {
		width: 100% !important;
		height: 100% !important;

		video {
			width: 100% !important;
			height: 100% !important;
		}
	}

	.leftFULL {
		/deep/.uni-video-container {
			display: flex;
		}


	}

	.BOXbj {
		width: 100%;
		height: 100%;
		position: fixed;
		left: 0rem;
		top: 0rem;
	}

	.FULL {
		width: 100%;
		height: 100%;
		position: fixed;
		left: 0%;
		top: 0%;
		// background: url("../assets/bj1.jpg") no-repeat 0 0;
		background-size: 100%;

		video {
			width: 100%;
		}
	}

	/deep/.uni-list-item__container {
		padding: 0.4rem 0.15rem !important;
	}

	.imgWidth {
		width: 100%;
		height: 100%;
		object-fit: contain;
		padding: 0.35rem 0;
		display: flex;
		justify-content: center;
		align-items: center;
		// height:33%;
	}

	/deep/uni-image {
		div {
			display: none;
		}

		img {
			position: relative !important;
			opacity: 1 !important;
		}
	}

	.bottomBox {
		box-sizing: border-box;
	}

	/deep/.uni-video-container {
		width: 100%;
		height: 100%;
	}

	/deep/.uni-video-video {
		width: 100%;
		// height: 100%;
	}

	.mediateFULL {
		position: relative;
		display: flex;
		flex-direction: column;
		width: 69%;
		height: 100vh;
		margin: 0 auto;

		// padding-top: 12rem;
		.topBox {
			flex: 1;
			margin-top: 0.9rem;
			margin-bottom: 0.05rem;
			height: 77%;

			video {
				width: 100%;
			}
		}

		p {
			font-size: 0.45rem;
			font-family: Source Han Sans CN, Source Han Sans CN-Regular;
			font-weight: 400;
			text-align: LEFT;
			margin: 0.1rem 0;
			color: #000;
		}
	}

	.fonts {
		font-size: 4rem;
	}



	.leftFULL {
		display: flex;
		margin-left: 2.6%;
		// overflow: hidden;
		margin-top: 0.5rem;
		position: relative;
		width: 94%;
		height: 76%;
		padding-top: 1.7rem;

		.leftBox {
			height: 100%;
			flex: 4;
		}

		video {
			height: 100%;
		}

		.rightBox {
			display: flex;
			justify-content: flex-end;
			flex-direction: column;
			// width: 51.666667rem;
			// padding-bottom: 3rem;
			box-sizing: border-box;
			background: rgba(255, 255, 255, 0.6);
			flex: 1;

			p {
				font-size: 0.44rem;
				font-family: Source Han Sans CN, Source Han Sans CN-Regular;
				font-weight: 400;
				text-align: LEFT;
				color: #000000;
				padding: 0.3rem;
				letter-spacing: 0.03rem;
			}
		}

	}
</style>
